<template>
    <!--生成经营范围-->
  <div class="manage">
     <!--内容-->
     <div class="m-content">
         <div class="m-c-container">
            <div class="m-c-c-1">
               <Card :class="{_0:index!=0}" v-for="(item,index)  in data" :key=index>
                 <p slot="title">{{item.name}}</p>
                 <div class="c-c-x">
                   <div v-for="(i,k) in item.items" @click="choice(index,k)">
                      <div class="c-c-x-1" :class="{on:index==x&&i.choice==true}">
                        {{i.name}}
                      </div>
                   </div>
                 </div>
               </Card>
            </div>
         </div>
     </div>
    <!--底部-->
    <div class="m-footer">
      <div class="footer-text" @click="sure">
        确定保存
      </div>
    </div>
  </div>
</template>

<script>
  import { Toast } from 'mint-ui';
    export default {
        name: "manage",
        data() {
            return {
              x:-1,
              data: [
                {
                  "choice": false,
                  "id": "5ab1e7e3015a483accc7428a",
                  "items": [
                    {
                      "bId": "5ab1e7e3015a483accc7428a",
                      "choice": false,
                      "id": "5ab1e81b015a483accc7428b",
                      "name": "网络科技"
                    },
                    {
                      "bId": "5ab1e7e3015a483accc7428a",
                      "choice": false,
                      "id": "5ab1e82c015a483accc7428c",
                      "name": "电子商务"
                    },
                    {
                      "bId": "5ab1e7e3015a483accc7428a",
                      "choice": false,
                      "id": "5ab1e835015a483accc7428d",
                      "name": "信息技术"
                    },
                    {
                      "bId": "5ab1e7e3015a483accc7428a",
                      "choice": false,
                      "id": "5ab1e83c015a483accc7428e",
                      "name": "游戏"
                    },
                    {
                      "bId": "5ab1e7e3015a483accc7428a",
                      "choice": false,
                      "id": "5ab1e842015a483accc7428f",
                      "name": "生物技术"
                    }
                  ],
                  "name": "科学类"
                },
                {
                  "choice": false,
                  "id": "5ab1e859015a483accc74290",
                  "items": [
                    {
                      "bId": "5ab1e859015a483accc74290",
                      "choice": false,
                      "id": "5ab1e86c015a483accc74291",
                      "name": "教育"
                    },
                    {
                      "bId": "5ab1e859015a483accc74290",
                      "choice": false,
                      "id": "5ab1e878015a483accc74292",
                      "name": "新闻"
                    },
                    {
                      "bId": "5ab1e859015a483accc74290",
                      "choice": false,
                      "id": "5ab1e87b015a483accc74293",
                      "name": "娱乐"
                    }
                  ],
                  "name": "许可类"
                },
                {
                  "choice": false,
                  "id": "5ab1e889015a483accc74294",
                  "items": [],
                  "name": "服务类"
                },
                {
                  "choice": false,
                  "id": "5ab1e891015a483accc74295",
                  "items": [],
                  "name": "其他类"
                },
                {
                  "choice": false,
                  "id": "5ab1e7e3015a483accc7428a",
                  "items": [
                    {
                      "bId": "5ab1e7e3015a483accc7428a",
                      "choice": false,
                      "id": "5ab1e81b015a483accc7428b",
                      "name": "网络科技"
                    },
                    {
                      "bId": "5ab1e7e3015a483accc7428a",
                      "choice": false,
                      "id": "5ab1e82c015a483accc7428c",
                      "name": "电子商务"
                    },
                    {
                      "bId": "5ab1e7e3015a483accc7428a",
                      "choice": false,
                      "id": "5ab1e835015a483accc7428d",
                      "name": "信息技术"
                    },
                    {
                      "bId": "5ab1e7e3015a483accc7428a",
                      "choice": false,
                      "id": "5ab1e83c015a483accc7428e",
                      "name": "游戏"
                    },
                    {
                      "bId": "5ab1e7e3015a483accc7428a",
                      "choice": false,
                      "id": "5ab1e842015a483accc7428f",
                      "name": "生物技术"
                    }
                  ],
                  "name": "科学类"
                },
                {
                  "choice": false,
                  "id": "5ab1e859015a483accc74290",
                  "items": [
                    {
                      "bId": "5ab1e859015a483accc74290",
                      "choice": false,
                      "id": "5ab1e86c015a483accc74291",
                      "name": "教育"
                    },
                    {
                      "bId": "5ab1e859015a483accc74290",
                      "choice": false,
                      "id": "5ab1e878015a483accc74292",
                      "name": "新闻"
                    },
                    {
                      "bId": "5ab1e859015a483accc74290",
                      "choice": false,
                      "id": "5ab1e87b015a483accc74293",
                      "name": "娱乐"
                    }
                  ],
                  "name": "许可类"
                },
                {
                  "choice": false,
                  "id": "5ab1e889015a483accc74294",
                  "items": [],
                  "name": "服务类"
                },
                {
                  "choice": false,
                  "id": "5ab1e891015a483accc74295",
                  "items": [],
                  "name": "其他类"
                }
              ],
            };
        },
        methods: {
          sure(){
            if (this.x<0){
              Toast("请选择经营范围");
              return;
            }
            let list=[];
            this.data[this.x].items.forEach(i=>{
              if (i.choice){
                list.push(i.name);
              }
            })
            this.$store.commit("cpManage",list.join(","));
            this.$store.commit("cpType",this.data[this.x].name);
            this.$router.go(-1);
          },
          choice(x,y){
            this.x=x;
            this.data[x].items[y].choice=!this.data[x].items[y].choice;
            for (let i=0;i<this.data.length;i++){
              if(i==x)continue;
              for (let j=0;j<this.data[i].items.length;j++){
                this.data[i].items[j].choice=false;
              }
            }
          }
        },
    }
</script>

<style lang="less" scoped>
@import "./less/manage";
</style>
